<template>
	<view class="containner">
		<view class="withdraw">
			<view class="title">提现金额</view>
			<view class="input">￥<u-input placeholder="请输入提现金额" @input="nickNameConfirm" v-model="inputMoney" type="number" /></view>
			<view class="tips-text">当前可提现余额￥{{money}}，<text style="color: #2AC092;" @click="allWithdraw">全部提现</text></view>
		</view>
		<view class="bankinfo">
			<view class="title">提现金额</view>
			<u-cell-group>
				<u-cell-item title="持卡人" :value="cardholder" @click="handlerType(1)"></u-cell-item>
				<u-cell-item title="卡号" :value="card_number" @click="handlerType(2)"></u-cell-item>
				<u-cell-item title="开户行" :value="account_bank" @click="handlerType(3)"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="btns">
			<u-button shape="circle" :custom-style="customStyle" :disabled="isdisabled">申请提现</u-button>
		</view>
		<view class="tips">
			<view>温馨提示</view>
			<view>1、提现手续费{{withdrawRate}}%；</view>
			<view>2、提现时间：9:00~18:00 周一至周六 </view>
			<view>3、到账时间72小时内</view>
		</view>
		<!-- 弹窗输入 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" :title="titleType" :value="nickname" :placeholder="titleType"
				@confirm="nickNameConfirm" confirmText="确认修改"></uni-popup-dialog>
		</uni-popup>
		<!-- 弹窗提示 -->
		<u-popup v-model="show" mode="center" :mask-close-able="false" :closeable="true" border-radius="20">
			<view class="" style="max-width: 78vw;padding: 42upx 96upx;">
				<view style="text-align: center;"><u-icon name="checkmark-circle-fill" color="#2AC092" size="72"></u-icon></view>
				<view style="text-align: center;font-size: 28upx;margin-top: 28upx;color: #2AC092;">提现申请成功</view>
				<view style="text-align: center;font-size: 28upx;line-height: 48upx;margin-top: 20upx;">系统将在1-3个工作日内审核完成 并打款提现金额到指定账户</view>
				<view style="margin-top: 30upx;">
					<u-button shape="circle" :hair-line="false" @click="show = false" :custom-style="customStyle1">知道了</u-button></view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		getWithdraw,
		getWithdrawRate,
		getUserInfo
	} from '@/api/user.js'
	export default {
		data() {
			return {
				customStyle:{
					backgroundColor:'#ccc',
					color:'#fff',
					fontSize:'32upx'
				},
				customStyle1:{
					backgroundColor:'#2AC092',
					color:'#fff',
					fontSize:'28upx'
				},
				isdisabled:true,
				show:false,
				withdrawRate:'',
				money:'',
				inputMoney:'',
				titleType:'请输入持卡人姓名',
				nickname:'',
				inputType:'',
				cardholder:'请输入持卡人姓名',
				card_number:'请输入银行账号',
				account_bank:'请输入开户银行名称'
			}
		},
		mounted() {
			this.getUserInfo()
			this.getWithdrawRate()
		},
		methods: {
			// 输入类型
			handlerType(type){
				this.inputType = type
				this.nickname = ''
				if(type==1){
					this.titleType = '请输入持卡人姓名'
					// this.cardholder = ''
					this.$refs.inputDialog.open()
				}
				if(type==2){
					this.titleType = '请输入银行账号'
					// this.card_number = ''
					this.$refs.inputDialog.open()
				}
				if(type==3){
					this.titleType = '请输入开户银行名称'
					// this.account_bank = ''
					this.$refs.inputDialog.open()
				}
			},
			// 全部tx
			allWithdraw(){
				this.inputMoney = this.money
				this.nickNameConfirm()
			},
			// 确认
			nickNameConfirm(e){
				if(this.inputType == 1){
					this.cardholder = e
				}
				if(this.inputType == 2){
					this.card_number = e
				}
				if(this.inputType == 3){
					this.account_bank = e
				}
				// 修改提现按钮
				if(this.cardholder != '请输入持卡人姓名' && this.cardholder != '请输入银行账号' && this.card_number != ''
				&& this.card_number != '' && this.account_bank != '请输入开户银行名称' && this.account_bank != ''
				&& this.inputMoney != '' && parseFloat(this.inputMoney) != 0 && parseFloat(this.inputMoney) <= parseFloat(this.money)){
					this.customStyle.backgroundColor = '#2AC092'
					this.isdisabled = false
				}else{
					this.customStyle.backgroundColor = '#ccc'
					this.isdisabled = true
				}
			},
			// 手续费
			getWithdrawRate(){
				let that = this
				getWithdrawRate().then(res=>{
					that.withdrawRate = res.data.data.withdraw_rate
				})
			},
			// 可提现金额
			getUserInfo(){
				let that = this
				getUserInfo().then(res=>{
					// that.money = res.data.data.income
					that.money = '2.00'
				})
			},
			// 提现
			getWithdraw(){
				let obj = {
					amount: this.inputMoney,
					cardholder: this.cardholder,
					card_number: this.card_number,
					account_bank: this.account_bank
				}
				let that = this
				getWithdraw(obj).then(res=>{
					if(res.code == 200){
						that.show = true
					}
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.containner{
		min-height: 100vh;
		background-color: #f2f2f2;
		padding: 20upx;
		.withdraw{
			// height: 320upx;
			background: #FFFFFF;
			border-radius: 10upx;
			padding:0 30upx;
			.tips-text,.input,.title{
				line-height: 85upx;
				border-bottom: #E9EDF0 1upx solid;
			}
			.title{
				font-size: 32upx;
			}
			.input{
				display: flex;
				font-size: 36upx;
				::v-deep .u-input__input{
					height: 85upx;
					font-size: 36upx;
					line-height: 85upx;
				}
			}
			.tips-text{
				font-size: 28upx;
			}
		}
		.bankinfo{
			// height: 378upx;
			background: #FFFFFF;
			border-radius: 10upx;
			margin-top: 20upx;
			overflow: hidden;
			.title{
				padding: 26upx 32upx;
			}
		}
		.btns{
			margin-top: 80upx;
		}
		.tips{
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			line-height: 48upx;
			margin-top: 50upx;
		}
	}
</style>